@(siteSetting: SiteSetting)(implicit request: RequestHeader)

@import helper._
@import utils.RequestHelper
@import play.api.libs.json.Json
@import models.JsonFormats.linkFormat
@import models.JsonFormats.siteSettingFormat
@views.html.admin.main("系统设置 - 基础设置", "setting", "setting-base") {
<link href="/assets/admin/assets/global/plugins/bootstrap-daterangepicker/daterangepicker.min.css" rel="stylesheet" type="text/css" />

<!-- BEGIN PAGE HEAD-->
<div class="page-head">
    <!-- BEGIN PAGE TITLE -->
    <div class="page-title">
        <h1>系统设置
            <small>基础设置</small>
        </h1>
    </div>
    <!-- END PAGE TITLE -->
    <!-- BEGIN PAGE TOOLBAR -->
    <div class="page-toolbar">

    </div>
    <!-- END PAGE TOOLBAR -->
</div>
<!-- END PAGE HEAD-->

<!-- BEGIN PAGE BASE CONTENT -->
<div class="row">
    <div class="col-md-12">
        <!-- BEGIN SAMPLE FORM PORTLET-->
        <div class="portlet light bordered">
            <div class="portlet-title">
                <div class="caption font-green-haze">
                    <i class="icon-settings font-green-haze"></i>
                    <span class="caption-subject bold uppercase"> 基础设置</span>
                </div>
                <div class="actions">
                    <a class="btn btn-circle btn-icon-only blue" href="javascript:;">
                        <i class="icon-cloud-upload"></i>
                    </a>
                    <a class="btn btn-circle btn-icon-only green" href="javascript:;">
                        <i class="icon-wrench"></i>
                    </a>
                    <a class="btn btn-circle btn-icon-only red" href="javascript:;">
                        <i class="icon-trash"></i>
                    </a>
                    <a class="btn btn-circle btn-icon-only btn-default fullscreen" href="javascript:;" data-original-title="" title=""> </a>
                </div>
            </div>
            <div id="app" class="portlet-body form">
                <form action="/admin/setting/base" method="post">
                    <div class="form-body">
                        <div class="form-group form-md-line-input">
                            <label class="col-md-2 control-label" for="form_control_1">网站名称</label>
                            <div class="col-md-10">
                                <input v-model="name" class="form-control" id="form_control_1" placeholder="输入网站名称">
                                <div class="form-control-focus"> </div>
                            </div>
                        </div>
                        <div class="form-group form-md-line-input">
                            <label class="col-md-2 control-label" for="form_control_2">网站首页</label>
                            <div class="col-md-10">
                                <input v-model="url" class="form-control" id="form_control_2" placeholder="输入网站首页">
                                <div class="form-control-focus"> </div>
                            </div>
                        </div>
                        <div class="form-group form-md-line-input">
                            <label class="col-md-2 control-label">首页标题</label>
                            <div class="col-md-10">
                                <input v-model="indexTitle" class="form-control" placeholder="输入网站名称">
                                <div class="form-control-focus"> </div>
                            </div>
                        </div>
                        <div class="form-group form-md-line-input">
                            <label class="col-md-2 control-label" for="file1">网站LOGO</label>
                            <div class="col-md-10">
                                <input id="file1" type="file" name="file" data-url="/resource/owner/logo?csrfToken=@CSRF.getToken.value" style="display:none;">
                                <button type="button" class="btn btn-default" onclick="$('#file1').click();"><i class="fa fa-cloud-upload"></i> 选择图片</button>
                                <div class="form-control-focus"><img id="img1" :src="logo"></div>
                                <span class="help-block"></span>
                            </div>
                        </div>
                        <div class="form-group form-md-line-input" style="margin-top: 80px;">
                            <label class="col-md-2 control-label" for="file2">网站图标(32*32 ico)</label>
                            <div class="col-md-10">
                                <input id="file2" type="file" name="file" data-url="/resource/owner/favicon?csrfToken=@CSRF.getToken.value" style="display:none;">
                                <button type="button" class="btn btn-default" onclick="$('#file2').click();"><i class="fa fa-cloud-upload"></i> 选择图片</button>
                                <div class="form-control-focus"><img id="img2" :src="favicon"></div>
                                <span class="help-block"></span>
                            </div>
                        </div>
                        <div class="form-group form-md-line-input" style="margin-top: 80px;">
                            <label class="col-md-2 control-label">SEO关键词</label>
                            <div class="col-md-10">
                                <input v-model="seoKeyword" class="form-control"  placeholder="输入SEO关键词，关键词间用英文逗号分隔">
                                <div class="form-control-focus"> </div>
                            </div>
                        </div>
                        <div class="form-group form-md-line-input">
                            <label class="col-md-2 control-label">SEO描述</label>
                            <div class="col-md-10">
                                <input v-model="seoDescription" class="form-control"  placeholder="输入SEO描述内容">
                                <div class="form-control-focus"> </div>
                            </div>
                        </div>
                        <div class="form-group form-md-line-input">
                            <label class="col-md-2 control-label" for="form_control_1">友情链接</label>
                        </div>

                        <template v-for="(l, index) in links">
                            <div class='row'>
                                <div class="col-md-10 col-md-offset-2">
                                    <div class="row">
                                        <div class="col-md-4">
                                            <div class="form-group form-md-line-input has-success">
                                                <div class="input-icon">
                                                    <input v-model="l.title" class="form-control" placeholder="">
                                                    <label v-if="index == 0">网站标题</label>
                                                    <i class="fa fa-home"></i>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-md-4">
                                            <div class="form-group form-md-line-input has-warning">
                                                <div class="input-icon">
                                                    <input v-model="l.url" class="form-control" placeholder="">
                                                    <label v-if="index == 0">网站地址</label>
                                                    <i class="fa fa-link"></i>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-md-4">
                                            <div class="form-group form-md-line-input has-warning">
                                                <button @@click="links.splice(index, 1)" class="btn btn-sm red" type="button">删除</button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </template>

                        <div class='form-group form-md-line-input'>
                            <label class="col-md-2 control-label"></label>
                            <div class="col-md-10">
                                <button type="button" @@click="addLink" class="btn btn-default">新增友链</button>
                            </div>
                        </div>

                    </div>
                    <div class="form-actions">
                        <div class="row">
                            <div class="col-md-offset-2 col-md-10">
                                @CSRF.formField
                                <button id="save-btn" type="button" class="btn blue">保存设置</button>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
        <!-- END SAMPLE FORM PORTLET-->
    </div>
</div>

}

<script src="/assets/admin/assets/global/plugins/moment.min.js" type="text/javascript"></script>
<script src="/assets/admin/assets/global/plugins/bootstrap-daterangepicker/daterangepicker.min.js" type="text/javascript"></script>
<script src="/assets/admin/assets/global/plugins/jquery-file-upload/js/vendor/jquery.ui.widget.js" type="text/javascript"></script>
<script src="/assets/admin/assets/global/plugins/jquery-file-upload/js/jquery.iframe-transport.js" type="text/javascript"></script>
<script src="/assets/admin/assets/global/plugins/jquery-file-upload/js/jquery.fileupload.js" type="text/javascript"></script>
<script src="/assets/js/vue.js"></script>
<script src="/assets/plugins/layer/layer.js"></script>
<script>
var token = '@CSRF.getToken.value';

$(function () {
  $('#file1').fileupload({
      dataType: 'json',
      done: function (e, data) {
          //$('#logo').val(data.result.url);
          //$('#img1').attr('src', data.result.url);
          app.logo = data.result.url;
      }
  });
  $('#file2').fileupload({
      dataType: 'json',
      done: function (e, data) {
          app.favicon = data.result.url;
      }
  });
});

var app = new Vue({
  el: '#app',
  data: @Html(Json.toJson(siteSetting).toString),
  methods: {
    addLink: function(){
      this.links.push({title: '', url: 'http://', target: '_blank'});
    },
    getSubmitData: function(){
        //return JSON.parse(JSON.stringify(this.$data));
        return JSON.stringify(this.$data);
    }
  }
});

$('#save-btn').click(function(){
  $.ajax({
    type: 'post',
    dataType: 'json',
    contentType: 'application/json; charset=utf-8',
    data: app.getSubmitData(),
    url: '/admin/setting/base?csrfToken=' + token,
    success: function(res){
      if(res.status === 0) {
        layer.msg("保存成功！");
      } else {
        layer.msg(res.msg||res.code);
      }
    }, error: function(e){
      layer.msg('请求异常，请重试');
    }
  });
});
</script>